<template>
  <div>
    <header class="header">
      <div class="logo" style="display: flex">
        <img
          style="width: 50px; height: 30px"
          src="@/asstes/images/ats_logo_RGB_small.jpg"
          alt=""
        />
        <div class="title" style="margin-left: 10px">Smart Factory</div>
      </div>
      <div style="cursor: pointer; font-size: 14px; color: #ccc">
        <div @click="changeLang('en')" v-if="lang === 'zh_CN'">English</div>
        <div @click="changeLang('zh_CN')" v-else>中文</div>
      </div>
    </header>
    <RouterView @currentPath="getCurrentPath" />
    <div class="footer" v-if="isLogin">
      <Button style="flex: 1; border-radius: 0" type="default" @click="outEv">{{
        $t("common.loginOut")
      }}</Button>
      <Button
        style="flex: 0.4; border-radius: 0"
        type="default"
        @click="backEv"
        v-if="meta !== '/transfer'"
        ><Icon name="revoke"
      /></Button>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { Button, Icon } from "vant";

export default {
  name: "Login",
  components: { Button, Icon },
  data() {
    return {
      currentFacility: "",
      lang: localStorage.getItem("lang") || "en",
      meta: "",
    };
  },
  mounted() {
    let lastTouchEnd = 0;
    document.addEventListener(
      "touchend",
      (event) => {
        const now = new Date().getTime();
        if (now - lastTouchEnd <= 300) {
          event.preventDefault();
        }
        lastTouchEnd = now;
      },
      false
    );
  },
  methods: {
    outEv() {
      sessionStorage.removeItem("token");
      location.reload();
    },
    backEv() {
      this.$router.go(-1);
    },
    changeLang(lang) {
      localStorage.setItem("lang", lang);
      location.reload();
    },
    getCurrentPath(path) {
      this.meta = path;
      console.log(this.meta);
    },
  },
  computed: {
    isLogin() {
      return sessionStorage.getItem("token") ? true : false;
    },
  },
};
</script>
<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  padding: 0.2667rem;
  align-items: center;
  background-color: #2845b2;
  color: #fff;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  z-index: 999;
}
</style>
